<template>
  <div>
    {{message}}
    {{name}}
    {{next}}
  <div v-for="ite in auser" :key="ite.id">
    <span>{{ite.id}}------{{ite.name}}</span>
  </div>
  <div v-for="(qq,index) in todos" :key="index" >
     <span> {{index}}--------{{qq.text}}</span>
  </div>
  <div>
    <button v-on:click="reverseMessage">反转消息</button>
    <p>{{messagess}}</p>
  </div>
  <div>
    <p>Message---is:{{mess01}}</p>
    <input v-model="mess01">
  </div>
  <div>
    <p v-if="seen">现在可以看到</p>
  </div>
  <div>
    <li v-for="a in item01 " :key="a.message01">
      {{ a.message01 }}
    </li>
  </div>
  <div>
    <li v-for="(bbb, index,) in item02" :key="index">
        {{parentmassage}}-{{index}}--{{bbb.message02}}
    </li>
  </div>
  <div>
    <li v-for="(qqq, name,index) in object" :key="index">
        {{index}}..{{name}}:{{qqq}}
    </li>
  </div>
  <div>
    <span v-for="n in 10" :key="n" >{{n}}</span>
  </div>
  <div>
    <button v-on:click="counter+=1">Add 1</button>
    <p>按了{{counter}}下</p>
  </div>
  <div>
    <button v-on:click="greet">Greet</button>
  </div>
  <div>
    <button v-on:click="say('hi')">Say hi</button>
    <button v-on:click="say('hello')"> Say hello</button>
  </div>
  <!-- <div>
    <a v-on:click.stop="doThis"><a>
    <form v-on:submit.prevent="OnSubmit"></form>
    <a v-on:click.once="doThis"></a>
   </div> -->
    <div>
      <input v-model="xxx" placeholder="edit me">
      <p>Message is: {{xxx}}</p>
    </div>
  <div>
    <p style="white-space:pre-line;">More message is:{{xiaoxi}}</p>
    <br>
    <textarea v-model="xiaoxi" placeholder="add multiple lines"></textarea>
  </div>
  <div>
    <input type="checkbox" id="checkbox" value="checkbox" v-model="checked">
    <label for="checkbox">{{checked}}</label>
    <span>{{checked}}</span>
  </div>
  <div>
    <input type="checkbox" id="jack" value="jack" v-model="checkName">
    <label for="jack">Jack</label>
    <input type="checkbox" id="John" value="John" v-model="checkName">
    <label for="John">John</label>
    <br>
    <span>Checkednames::::{{checkName}}</span>
  </div>
  <div>
    <select v-model="xuanzhe">
      <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
    </select>
    <span>Selected:{{xuanzhe}}</span>
  </div>
  </div>
</template>
 

<script>
export default {
  //声明变量
data(){
  return {
    message: 'hello world',
    name:"     --- jan",
    next:"     ---hbkbkj",
    auser:[
      {
        id:1,
        name:'jkn'
      },
      {
        id:2,
        name:'jhbk'
      }
    ],
    messagess:"hello vue!",
      todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' },
    ],
    mess01:'hello world',
    seen: true,
    item01:[
      {message01:'foo'},
      {message01:'Bar'},
    ],
    parentmassage:'parent',
    item02:[
      {message02:'foo'},
      {message02:'Bar'},
    ],
    object:{
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    },
    counter :0,
    xxx :'',
    xiaoxi:'',
    checkName:[],
    xuanzhe:'',
  }
},


methods:{
reverseMessage: function () {
      this.messagess = this.messagess.split('').reverse().join('')
 },
 greet:function(event){
   alert("Hello  vue")
   if(event){
     alert("你好")
   }
 },
 say:function(zxzx){
   alert(zxzx)
 },
},
//生命周期3个
//首次进入页面执行函数(页面渲染)
created() {

},
//页面渲染完后执行它
mounted(){

},
//离开页面执行
destroyed(){

},

}
</script>

<style>

</style>